<template>
  <div class="information">
    <div class="information-box">
      <div>
        <div class="avatarimg" @click="showBaseInfo">
          <img :src="user.avatar" alt="" width="100px" height="100px" />
          <div class="avatarimg-card">
            <span>修改基本信息</span>
            <div><span>+</span></div>
          </div>
        </div>
        <!-- <p>{{user.username}} </p>
        <p>{{user.realname}} </p>
        <button>退出登陆</button> -->
        <div class="outcontainer">
          <svg width="700" height="250" class="text">
            <defs>
              <linearGradient id="geekColor" gradientTransform="rotate(90)">
                <stop offset="0%" stop-color="#000"></stop>
                <!-- //渐变动画 -->
                <animate
                  attributeName="stop-color"
                  values="#91bd3a;#12cad6;#91bd3a"
                  dur="10s"
                  begin="3s"
                  repeatCount="indefinite"
                ></animate>
                <stop offset="100%" stop-color="#12cad6"></stop>
              </linearGradient>
            </defs>
            <text style="text-anchor: middle" class="logo_text" x="200" y="100">
              {{ user.username }}
            </text>
            <text style="text-anchor: middle" class="logo_text" x="200" y="150">
              {{ user.realname }}
            </text>
          </svg>
        </div>
        <!-- <button class="logout">退出登录</button> -->
        <div class="email">
          <span @click="showEmailDialog = true">{{
            user.email || "点击此处绑定邮箱"
          }}</span>
        </div>
        <span @click="Logout()" class="logout">退出登陆</span>
      </div>
    </div>
    <transition name="fadeIn">
      <div class="information-change" v-if="showChangeBaseInfo">
        <base-change @cancelShowBaseChange="showChangeBaseInfo = false"></base-change>
      </div>
    </transition>
    <transition name="fadeIn">
      <div class="information-change" v-if="showEmailDialog">
        <email-dialog @close-dialog="showEmailDialog = false"></email-dialog>
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import BaseChange from "@/components/baseChange.vue";
import EmailDialog from "@/components/emailDialog.vue";
const $store = useStore();
const $router = useRouter();
const showChangeBaseInfo = ref<boolean>(false);
const showEmailDialog = ref<boolean>(false);

onMounted(() => {
  // html2camvasTest();
});

const user = computed(() => {
  return $store.getters.user;
});
const openEmailDialog = () => {};
const Logout = () => {
  localStorage.removeItem("LoginToken");
  $store.dispatch("setUser", {
    username: "",
    avatar: "",
    status: 0,
    id: "",
    realname: "",
  });
  $store.dispatch("setToken", false);
  $router.replace("/index");
};
const showBaseInfo = () => {
  showChangeBaseInfo.value = true;
};
</script>

<style lang="scss" scoped>
@import url("../../../css/comment/animate.css");
.information {
  user-select: none;
  position: relative;
  height: calc(100vh - 100px);

  .information-box {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 400px;
    height: 400px;
    text-align: center;
    .avatarimg {
      position: relative;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      display: inline-block;
      overflow: hidden;
      transition: all 0.4s;
      &:hover .avatarimg-card {
        top: 60px;
      }
      &:hover {
        box-shadow: 0px 0px 6px 0px #00000099;
        scale: (1.1);
      }
      img {
        border-radius: 50%;
        width: 100px;
        height: 100px;
        // &:hover {
        //   transform: rotate(360deg);
        // }
      }
      &-card {
        position: absolute;
        width: 100px;
        height: 100px;
        transition: all 0.4s;
        background-color: rgba(0, 0, 0, 0.5);
        top: 100px;
        color: #fff;
        font-size: 12px;
        padding-top: 5px;
        &:hover {
          top: 60px;
        }
      }
    }
    .logout {
      color: #ea534f;
      &:hover {
        color: #ea534f99;
        cursor: url("../../../assets/img/cur/mais.png"), default;
      }
    }
    .email {
      margin-bottom: 20px;
      span {
        font-size: 18px;
        color: #3478c6;
        &:hover {
          color: #3478c699;
        }
      }
    }
    #outlogo {
      /* background: url("../src/assets/img/rainImg.jpg"); */
      /* background-image: url("./img/rainImg.jpg"); */
      background-color: #fff;
      position: absolute;
      background-size: 100vw 100vh;
      z-index: 9999999999999999999;
      transition: all 0.5s;
    }

    .outcontainer {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 200px;
    }

    .logo_text {
      font-size: 36px;
      fill: none;
      stroke: url(#geekColor);
      stroke-width: 1;
      stroke-dasharray: 10 280;
      stroke-dashoffset: 10;
      animation: drawing 4.3s linear 0s forwards;
    }

    p {
      font-weight: 200;
      font-size: 20px;
      line-height: 28px;

      button {
        background-color: transparent;
        border: 1px solid rgba(0, 0, 0, 0.5);
        border-radius: 5px;
        margin-left: 10px;
      }
    }
  }
}
@keyframes drawing {
  to {
    stroke-dasharray: 280;
    stroke-dashoffset: 0;
  }
}
// @media screen and (max-width: 765px) {
//   .logo_text {
//     font-size: 96px;
//   }
// }
</style>
